<template>
  <div>
    <div style="border-bottom:1px dashed #8e8e8e;margin:30px 0 20px"></div>
    <div class="chart-box-wyw">
      <div
        class="chartUserSelect"
        id="chartIdgroup1"
        v-loading="outputLoading"
        element-loading-text="laoding"
        :style="{width:echartsWidth,height:echartsHeight}"
      ></div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import tools from "@/utils/tools";
import { options } from "runjs";
export default {
  data() {
    return {
      visible: false,
      peopleStautsVm: [],
      defaultpeopleStautsVm: [],
      peopleStautsOptions: [
        {
          value: "001",
          label: "在岗",
          children: [
            { value: "1", label: "正常" },
            { value: "2", label: "实习" },
          ],
        },
        {
          value: "002",
          label: "离职",
          children: [
            { value: "3", label: "正常离职" },
            { value: "4", label: "实习离职" },
          ],
        },
      ],
       echartsWidth: document.body.clientWidth * 0.9 -280 + "px",
      echartsHeight:this.$store.state.settings.echartsHeight,
      outputLoading: false,
      capacityInputChart: null,
      trendOutput1Chart: null,
      thingsTypeVm: [],
      defaultSelectThingsType: [],
      thingsTypeOptions: [
        {
          value: "001",
          label: "研发管理",
          children: [
            { value: "10", label: "需求分析" },
            { value: "11", label: "项目管理" },
          ],
        },
        {
          value: "002",
          label: "测试管理",
          children: [
            { value: "20", label: "案例编写" },
            { value: "21", label: "数据准备" },
          ],
        },
        {
          value: "003",
          label: "其他类型",
          children: [
            { value: "22", label: "参与会议" },
            { value: "23", label: "学习培训" },
          ],
        },
      ],
    };
  },
  mounted() {
    this.draw1();
    this.initSelect();
    // this.drawcapacityInputChart();
  },
  methods: {
    resetData() {},
    searchData() {},
    getParams() {
      let affaTypeList = [];
      this.thingsTypeVm.map((v) => {
        if (v.length > 1) {
          affaTypeList.push(v[1]);
        }
      });
      let obj = {
        user1: [],
        user2: [],
        affaTypeList: affaTypeList,
      };
      //人员状态处理
      let arr1 = [];
      arr2 = [];
      this.peopleStautsVm.map((arrayItem) => {
        arrayItem.map((item) => {
          if (item == "001") {
            arr1.push(arrayItem[1]);
          }
          if (item == "002") {
            arr2.push(arrayItem[1]);
          }
        });
      });
      if (arr2.some((v) => v == "3")) {
        let endNum = arr2.splice(arr2.length - 1, arr2.length);
        arr1 = [...arr1, ...endNum];
      }
      onj.user1 = arr1;
      onj.user2 = arr2;
      return obj;
      //   if (!this.ji) {
      //     this.userId = this.$store.state.userId;
      //   } else {
      //     this.userId = this.ji.split("_")[1];
      //   }
    },
    initSelect() {
      //事务类型默认选项
      this.defaultSelectThingsType = [];
      this.getTreeTingsType(this.thingsTypeOptions);
      this.thingsTypeVm = this.defaultSelectThingsType.filter((v) => {
        return v.length > 1;
      });
      this.defaultpeopleStautsVm = [];
      this.getTreePeopleStatus([this.peopleStautsOptions[0]]);
      this.peopleStautsVm = this.defaultpeopleStautsVm.filter((v) => {
        return v.length > 1;
      });
    },
    getTreeTingsType(data) {
      data.map((v) => {
        this.defaultSelectThingsType.push(
          tools.getSelectValueList(v.value, this.thingsTypeOptions)
        );
        // label:"其他类型"
        if (v.label !== "其他类型") {
          if (v.children) {
            return this.getTreeTingsType(v.children);
          }
        }
      });
    },
    getTreePeopleStatus(d) {
      d.map((v) => {
        this.defaultpeopleStautsVm.push(
          tools.getSelectValueList(v.value, [this.peopleStautsOptions[0]])
        );
        if (v.children) {
          return this.getTreePeopleStatus(v.children);
        }
      });
    },
    // initchart() {
    //   this.outputLoading = true;
    //   personalbar().then((res) => {
    //     this.outputLoading = false;
    //     this.drawcapacityInputChart(
    //       "trendOutput1",
    //       tools.transformNull(res.data)
    //     );
    //   });
    // },
draw1() {
      var chartDom = document.getElementById("chartIdgroup1");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: { text: "上线故事各周期占比", textStyle: { fontSize: 14 } },
        toolbox: {
          top: "0",
          right: "10",
          feature: {
            show: true,
            readonly: false,
            // optionToContent:opt=>{
            //     return tools.ch
            // }
          },
          saveAsImage: { show: true },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: function (params) {
            var str = params[0].name + "<br>";
            var total = 0;
            params.forEach(function (item) {
              if (item.seriesName == "平均故事测试时长") {
                str +=
                  item.marker +
                  item.seriesName +
                  ":" +
                  item.value +
                  "人天" +
                  "<br>";
              } else {
                str +=
                  item.marker +
                  item.seriesName +
                  ":" +
                  item.value +
                  "人月" +
                  "<br>";
                total = tools.add(total, item.value);
              }
            });
            str +=
              '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#be77ff"></span>' +
              "总计:" +
              total +
              "人月" +
              "<br>";
            return str;
          },
        },
        legend: {
          type: "scroll",
          data: [
            "平均故事分析时长",
            "平均故事评估时长",
            "平均故事待实现时长",
            "平均故事实现时长",
            "平均故事待测试时长",
            "平均故事测试时长",
          ],
          orient: "horizontal",
          x: "center",
          y: "bottom",
        },
        grid: {
          left: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: ["个人", "互金", "信用卡", "公司", "国金", "基础", "集团"],
          axisTick: {
            alignWithLabel: true,
          }, //刻度居中
          axisPointer: {
            type: "shadow",
          },
          axisLabel: {
            interval: 0,
          },
          triggerEvent: true,
        },
        dataZoom: [
          {
            show: true,
            type: "inside",
            startValue: 5,
            endValue: 10,
          },
        ],
        yAxis: [
          {
            name: "人天",
            type: "value",
          },
          //   {
          //     name: "%",
          //     type: "value",
          //     splitLine:{show:false}//去除y轴刻度线
          //   },
        ],
        series: [
          {
            name: "平均故事分析时长",
            data: [2, 200, 150, 80, 70, 110, 130],
            type: "bar",
            stack: "开发",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
          {
            name: "平均故事评估时长",
            data: [4, 20, 50, 80, 70, 110, 30],
            type: "bar",
            stack: "开发",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(120, 120, 120, 0.2)",
            },
          },
          {
            name: "平均故事待实现时长",
            data: [6, 34, 150, 24, 66, 100, 70],
            type: "bar",
            stack: "开发",
            showBackground: true,
            backgroundStyle: {
              color: "#35b9ba",
            },
          },
          {
            name: "平均故事实现时长",
            data: [8, 23, 77, 22, 47, 84, 130],
            type: "bar",
            stack: "开发",
            showBackground: true,
            backgroundStyle: {
              color: "#ed7d31",
            },
          },
          {
            name: "平均故事待测试时长",
            data: [10, 99, 34, 66, 70, 22, 33],
            type: "bar",
            stack: "开发",
            showBackground: true,
            backgroundStyle: {
              color: "#a5a5a5",
            },
          },
          {
            name: "平均故事测试时长",
            data: [12, 25, 33, 88, 26, 110, 56],
            type: "bar",
            stack: "开发",
            showBackground: true,
            backgroundStyle: {
              color: "#ffc000",
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
    // draw1() {
    //   var chartDom = document.getElementById("chartIdgroup1");
    //   var myChart = echarts.init(chartDom);
    //   var option;

    //   option = {
    //     title: { text: "故事周转率", textStyle: { fontSize: 14 } },
    //     toolbox: {
    //       top: "0",
    //       right: "10",
    //       feature: {
    //         dataView: {
    //           show: true,
    //           readonly: false,
    //           optionToContent: (opt) => {
    //             // if (org == "center") {
    //             //   opt.xAxis[0].data=opt.xAxis[0].data.map((item)=>{
    //             //     return item+'研发中心'
    //             //   })
    //             // }
    //             return tools.chartExcel(opt);
    //           },
    //           contentToOption: () => {},
    //         },
    //         saveAsImage: { show: true },
    //       },
    //       saveAsImage: { show: true },
    //     },
    //     tooltip: {
    //       trigger: "axis",
    //       axisPointer: {
    //         type: "cross",
    //         crosStyle: {
    //           color: "#999",
    //         },
    //       },
    //       formatter: function (params) {
    //         var str = params[0].name + "<br>";
    //         // if(org=='center'){
    //         //   str=`${params[0].name}研发中心<br/>`
    //         // }
    //         params.forEach(function (item) {
    //           str +=
    //             item.marker +
    //             item.seriesName +
    //             ":" +
    //             item.value +
    //             "天" +
    //             "<br>";
    //         });
    //         return str;
    //       },
    //     },
    //     legend: {
    //       data: ["故事响应周期", "故事实施周期"],
    //       orient: "horizontal",
    //       x: "center",
    //       y: "bottom",
    //     },
    //     grid: {
    //       left: "3%",
    //       containLabel: true,
    //     },
    //     xAxis: {
    //       type: "category",
    //       data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    //       axisTick: {
    //         alignWithLabel: true,
    //       }, //刻度居中
    //       axisPointer: {
    //         type: "shadow",
    //       },
    //       axisLabel: {
    //         interval: 0,
    //       },
    //       triggerEvent: true,
    //     },
    //     dataZoom: [
    //       {
    //         show: true,
    //         type: "inside",
    //         startValue: 5,
    //         endValue: 10,
    //       },
    //     ],
    //     yAxis: [
    //       {
    //         name: "人天",
    //         show: true,
    //         type: "value",
    //         axisTick: { alignWithLabel: true },
    //         axisLine: {
    //           //y轴刻度线
    //           show: true,
    //         },
    //       },
    //       //   {
    //       //     name: "%",
    //       //     type: "value",
    //       //     splitLine: { show: false }, //去除y轴刻度线
    //       //     show: false,
    //       //     max: 70,
    //       //     min: 0,
    //       //     splitNumber: 10,
    //       //     boundaryGap: [0.2, 0.2],
    //       //   },
    //     ],
    //     series: [
    //       {
    //         name: "故事响应周期",
    //         data: [120, 200, 150, 80, 70, 110, 130],
    //         type: "line",
    //         showBackground: true,
    //         itemStyle: {
    //           normal: {
    //             show: true,
    //             color: "red",
    //           },
    //         },
    //         markLine: {
    //           symbol: ["nono", "none"],
    //           data: [
    //             {
    //               silrnt: true,
    //               lineStyle: {
    //                 type: "dotted",
    //                 color: "red",
    //               },
    //               yAxis: 153.23,
    //               type: "max",
    //             },
    //           ],
    //         },
    //       },
    //       {
    //         name: "故事实施周期",
    //         data: [20, 20, 50, 80, 70, 110, 30],
    //         type: "line",
    //         showBackground: true,
    //         itemStyle: {
    //           normal: {
    //             show: true,
    //             color: "blue",
    //           },
    //         },
    //         markLine: {
    //           symbol: ["nono", "none"],
    //           data: [
    //             {
    //               silrnt: true,
    //               lineStyle: {
    //                 type: "dotted",
    //                 color: "blue",
    //               },
    //               yAxis: 105.23,
    //               type: "max",
    //             },
    //           ],
    //         },
    //       },
    //     ],
    //   };

    //   option && myChart.setOption(option);
    //   window.addEventListener("resize", () => {
    //     myChart.resize({
    //       width: document.body.clientWidth * 0.5 - 200 + "px",
    //     });
    //   });
    //   // myChart.off("click"); //解绑点击事件m
    //   // myChart.on('click',async(params)=>{
    //   //   if(params.componentType!=='xAxis') return
    //   //   let orgList=[]
    //   //   let orgRes=await quary()
    //   //   orgList=orgRes.data
    //   //   let clickId=orgList.filter((v)=>{
    //   //     return params.value+'研发中心'==v.orgName
    //   //   })
    //   //   if(clickId&&clickId.length>0){
    //   //     let isPass=await this.$store.dispatch('user/changeIsDrillingRight',clickId[0].orgCode)
    //   //     if(!isPass){
    //   //       return this.$message.warning('暂无权限查看')
    //   //     }
    //   //     this.idlist.push(clickId[0].orgCode)
    //   //     this.allechart(clickId[0].orgCode)
    //   //   }
    //   // })
    // },
    // drawcapacityInputChart(trendOutput1, capacityList = {}) {
    //   if (!document.getElementById("trendOutput1")) return;
    //   this.trendOutput1Chart = echarts.init(
    //     document.getElementById("trendOutput1"),
    //     "shine"
    //   );
    //   let option = {
    //     title: { text: "任务产出情况", textStyle: { fontSize: 14 } },
    //     toolbox: {
    //       top: "0",
    //       right: "10",
    //       feature: {
    //         show: true,
    //         readonly: false,
    //         // optionToContent:opt=>{
    //         //     return tools.ch
    //         // }
    //       },
    //       saveAsImage: { show: true },
    //     },
    //     tooltip: {
    //       trigger: "axis",
    //       axisPointer: {
    //         type: "shadow",
    //       },
    //       formatter: function (params) {
    //         var str = params[0].name + "<br>";
    //         params.forEach(function (item) {
    //           str +=
    //             item.marker +
    //             item.seriesName +
    //             ":" +
    //             item.value +
    //             "人天" +
    //             "<br>";
    //         });
    //         return str;
    //       },
    //     },
    //     legend: {
    //       data: ["任务产出", "日均任务产出"],
    //       orient: "horizontal",
    //       x: "center",
    //       y: "bottom",
    //     },
    //     grid: {
    //       left: "3%",
    //       containLabel: true,
    //     },
    //     xAxis: {
    //       type: "category",
    //       data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    //     },
    //     yAxis: {
    //       name: "人天",
    //       type: "value",
    //     },
    //     series: [
    //       {
    //         name: "任务产出",
    //         data: [120, 200, 150, 80, 70, 110, 130],
    //         type: "bar",
    //         showBackground: true,
    //         backgroundStyle: {
    //           color: "rgba(180, 180, 180, 0.2)",
    //         },
    //       },
    //       {
    //         name: "日均任务产出",
    //         data: [20, 20, 50, 80, 70, 110, 30],
    //         type: "bar",
    //         showBackground: true,
    //         backgroundStyle: {
    //           color: "rgba(120, 120, 120, 0.2)",
    //         },
    //       },
    //     ],
    //   };
    //   this.trendOutput1Chart.setOption(option);
    //   window.addEventListener("resize", () => {
    //     this.trendOutput1Chart.resize();
    //   });
    // },
  },
};
</script>
<style lang="scss" scoped>
@import "../index.scss";
#chartIdgroup1 {
  margin: 20px 0;
}
#trendOutput1 {
  margin: 20px 0;
}
.module-select {
  text-align: right;
  margin-right: 50px;
}
.chart-box-wyw {
  display: flex;
  justify-content: space-around;
}
.cascader-hidden {
  width: 100%;
  ::v-deep .el-cascader__tags {
    overflow: hidden;
    .el-tag {
      max-width: 70px;
    }
    .el-tag--mini {
      height: 18px;
      line-height: 18px;
    }
  }
}
</style>